<template>
  <view class="order">
    <view class="tabs">
      <u-sticky>
        <u-tabs
          :list="orderStatusList"
          :current="current"
          :lineWidth="50"
          @change="changeOrderStatus"
        ></u-tabs>
      </u-sticky>
    </view>
    <view v-if="orderList && orderList.length > 0">
      <view class="order-list" v-for="item in orderList" :key="item.id">
        <view @click="linkOrderDetail(item)">
          <view class="status-infor-top">
            <view
              class="status"
              :class="[item.status === 40 ? '' : 'status-ing']"
              >{{ item.status === 40 ? "已完成" : "进行中" }}</view
            >
            <view class="time">{{
              item.gmtCreate
                ? formatTimes(item.gmtCreate, "YYYY/MM/DD hh:mm:ss")
                : ""
            }}</view>
            <view class="link-detail">
              <view class="title">订单详情</view>
              <view class="u-icon"
                ><u-icon name="arrow-right" color="#24345b" size="12"></u-icon
              ></view>
            </view>
          </view>
          <view class="name-and-price">
            <view class="name">{{ item.requestOrderCategoryName }}</view>
            <view class="price">{{ item.requestOrderPrice }}</view>
          </view>
          <view class="address">{{ item.userAddress }}</view>
        </view>
        <view>
          <view v-if="current === 0" class="btn-container">
            <u-button
              class="btn-list"
              type="primary"
              shape="circle"
              size="small"
              :plain="true"
              :hairline="true"
              text="联系客户"
              @click="callUser(item.userPhone)"
            ></u-button>
            <u-button
              class="btn-list"
              type="primary"
              shape="circle"
              size="small"
              :plain="true"
              :hairline="true"
              text="抵达确认"
              :disabled="item.status !== 10"
              @click="showConfirmArrivalDialog(item)"
            ></u-button>
            <u-button
              class="btn-list"
              type="primary"
              shape="circle"
              size="small"
              :plain="true"
              :hairline="true"
              text="施工照片"
              :disabled="item.status !== 20"
              @click="linkAddPic(item)"
            ></u-button>
            <u-button
              class="btn-list"
              type="primary"
              :hairline="true"
              shape="circle"
              size="small"
              text="完成订单"
              :disabled="item.status !== 20"
              @click="completeOrder(item)"
            ></u-button>
          </view>
          <view v-else class="btn-complete-container">
            <u-button
              class="btn-list"
              type="success"
              :hairline="true"
              shape="circle"
              size="small"
              text="查看详情"
              @click="linkOrderDetail(item)"
            ></u-button>
          </view>
        </view>
      </view>
    </view>
    <u-empty
      v-if="isEmpty"
      text="订单为空"
      mode="order"
      icon="http://cdn.uviewui.com/uview/empty/car.png"
    >
    </u-empty>
    <u-modal
      width="460rpx"
      :show="showModel"
      :title="title"
      :content="content"
      :showCancelButton="true"
      @confirm="confirm"
      @cancel="cancel"
    ></u-modal>
    <u-loading-icon
      text="加载中..."
      :show="isLoading"
      textSize="14"
    ></u-loading-icon>
  </view>
</template>

<script>
import { getOrderList, orderSign, orderFinish } from "@/api/order";
import { formatTimes } from "@/utils/index";
export default {
  data() {
    return {
      formatTimes,
      orderStatusList: [
        {
          name: "进行中",
          value: 1,
        },
        {
          name: "已完成",
          value: 2,
        },
      ],
      showModel: false,
      title: "提示",
      content: "",
      current: 0,
      isLoading: false,
      page: {
        pageNo: 1,
        pageSize: 10,
      },
      lastPageIndex: 0,
      orderList: [],
      isEmpty: false,
    };
  },
  // 下拉刷新
  onPullDownRefresh() {
    console.log("下拉刷新");
    this.page.pageNo = 1;
    this.orderList = [];
    this.getOrderList();
  },
  // 上拉加载
  onReachBottom() {
    console.log("上拉加载");
    if (this.page.pageNo < this.lastPageIndex) {
      this.page.pageNo++;
      this.getOrderList();
    }
  },
  mounted() {
    this.getOrderList();
  },
  methods: {
    // 获取订单列表 10 20 为进行中 40 为已完成
    async getOrderList() {
      try {
        this.isLoading = true;
        const parmas = {
          ...this.page,
          status: this.current === 0 ? [10, 20] : [40],
        };
        const res = await getOrderList(parmas);
        const list = res.data.objects;
        this.isLoading = false;
        this.orderList = [...this.orderList, ...list];
        this.lastPageIndex = res.data.lastPageIndex;
        this.orderList.length <= 0
          ? (this.isEmpty = true)
          : (this.isEmpty = false);
        uni.stopPullDownRefresh();
      } catch (error) {
        console.log(error);
        this.isLoading = false;
      }
    },
    // 订单状态改变
    changeOrderStatus(item) {
      this.current = item.index;
      this.orderList = [];
      this.page.pageNo = 1;
      this.getOrderList();
    },
    // 跳转到详情页
    linkOrderDetail(item) {
      uni.navigateTo({
        url: `/pages/order/orderDetail?orderNo=${item.orderNo}`,
      });
    },
    // 拨打电话
    callUser(phone) {
      uni.makePhoneCall({
        phoneNumber: phone,
        success: function () {
          console.log("拨打电话成功");
        },
        fail() {
          console.log("打电话失败了");
        },
      });
    },
    // 确认抵达
    showConfirmArrivalDialog(item) {
      this.showModel = true;
      this.title = "确认抵达？";
      this.content = "确认将无法取消哦！";
      this.modelType = "arrive";
      this.itemData = item;
    },
    // 完成订单
    completeOrder(item) {
      this.showModel = true;
      this.title = "确定完成订单？";
      this.content = "确认将无法取消哦！";
      this.modelType = "completeOrder";
      this.itemData = item;
    },
    //关闭确认model
    cancel() {
      this.showModel = false;
    },
    // 点确认model
    async confirm() {
      // modelType为 completeOrder 为完成订单功能
      // modelType为 arrive 为确认抵达功能
      if (this.modelType === "completeOrder") {
        // 完成订单
        try {
          await orderFinish({ orderNo: this.itemData.orderNo });
          wx.showToast({
            title: "成功！",
            icon: "none",
            duration: 2000,
          });
        } catch (error) {
          wx.showToast({
            title: "失败",
            icon: "none",
            duration: 2000,
          });
        }
        this.cancel();
      } else {
        // 确认抵达
        try {
          await orderSign({ orderNo: this.itemData.orderNo });
          wx.showToast({
            title: "成功！",
            icon: "none",
            duration: 2000,
          });
        } catch (error) {
          wx.showToast({
            title: "失败",
            icon: "none",
            duration: 2000,
          });
        }
        this.cancel();
      }
      this.loadOrderList();
    },

    // 重新初始化加载数据
    loadOrderList() {
      this.page.pageNo = 1;
      this.orderList = [];
      this.getOrderList();
    },
  },
};
</script>

<style lang="scss" scoped>
.order {
  margin: 0 20rpx;
  .tabs {
    margin-bottom: 20rpx;
  }
  .order-list {
    height: 250rpx;
    background: #ffffff;
    border-radius: 16rpx;
    padding: 24rpx 30rpx 40rpx 30rpx;
    margin-bottom: 30rpx;
    .status-infor-top {
      display: flex;
      justify-content: space-between;
      .status {
        height: 30rpx;
        // background: #ef6d44;
        background: #5ac725;
        border-radius: 6rpx;
        font-size: 20rpx;
        font-family: Source Han Sans CN-Regular, Source Han Sans CN;
        font-weight: 400;
        color: #ffffff;
        line-height: 30rpx;
        padding: 8rpx;
      }
      .status-ing {
        background: #457ef6;
      }
      .time {
        font-size: 24rpx;
        font-family: Source Han Sans CN-Regular, Source Han Sans CN;
        font-weight: 400;
        color: #24345b;
        line-height: 46rpx;
        flex: 1;
        margin-left: 24rpx;
      }
      .link-detail {
        font-size: 24rpx;
        font-family: Source Han Sans CN-Regular, Source Han Sans CN;
        font-weight: 400;
        color: #24345b;
        line-height: 46rpx;
        display: flex;
        .title {
          margin-right: 10rpx;
        }
        .u-icon {
          margin-top: 6rpx;
        }
      }
    }
    .name-and-price {
      padding: 24rpx 0 14rpx 0;
      display: flex;
      .name {
        font-size: 36rpx;
        font-family: Source Han Sans CN-Medium, Source Han Sans CN;
        font-weight: 500;
        color: #000000;
        line-height: 44rpx;
        flex: 1;
      }
      .price {
        font-size: 32rpx;
        font-family: Source Han Sans CN-Medium, Source Han Sans CN;
        font-weight: 500;
        color: #ef6d44;
        line-height: 50rpx;
        &:before {
          content: "¥";
          font-size: 20rpx;
          font-weight: normal;
        }
      }
    }
    .address {
      font-size: 28rpx;
      font-family: Source Han Sans CN-Regular, Source Han Sans CN;
      font-weight: 400;
      color: #000000;
    }
    .btn-container {
      display: flex;
      justify-content: flex-start;
      margin-top: 36rpx;
      .btn-list {
        width: 22%;
      }
    }
    .btn-complete-container {
      margin-top: 36rpx;
      .btn-list {
        width: 25%;
        float: right;
        margin-left: 20rpx;
      }
    }
  }
}
</style>